<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 卡片
        el-card
        -->
      <el-card>
        <!-- 表单 
          el-form  model：数据绑定  rules规则绑定  label-width:标题宽度 inline:行内模式  true行内模式  false块级模式
            el-form-item  label：标题   label-width:标题宽度  prop:绑定相应需要验证数据
        -->
        <el-form :model="form" inline>
          <el-form-item label="学科编号">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="学科名称">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <!-- el-select  v-model=表单值的双向绑定
                     el-option:  label文本内容    value：选中该项后的值 
               -->
            {{value}}
            <el-select v-model="value" placeholder="请选择">
              <!-- <el-option
                v-for="(item, index) in selectItem"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option> -->
              <el-option label="湖北省" value="1"></el-option>
              <el-option label="广西省" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="primary">清除</el-button>
            <el-button type="primary">+新增学科</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <h3>表格</h3>
      <!-- 表格
      el-table  data:表格数据绑定（注意：初始值也要数组）
        el-table-column：表格的列 
             label：当前列标题
             width：宽度
             prop:绑定当前列的值  
      自定义表单列
         1:在相应列(el-table-column)内加一个template标签
         2：在template标签上加了一个v-slot="局部变量scope"
         scope使用范围只能在template标签内
           scope.$index:  当前行数据的索引 可以理解 成for循环的 i
           scope.row     当前行全部数据  可以理解成 表格对应数组[i]
      

      
      -->
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column label="序号" width="60px">
          <!-- template是一个点位符标签 ，它不会渲染出来 -->
          <template v-slot="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column
          label="城市"
          width="200px"
          prop="city"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="edit(scope.$index,scope.row)"
              >编辑</el-button
            >
            <el-button type="text">禁用</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./ele.css" />
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        methods: {
          edit(index, row) {
            window.console.log(index);
            window.console.log(row);
          },
        },
        data: {
          value: "2",
          selectItem: [
            {
              label: "湖北省",
              value: "hb",
            },
            {
              label: "广东省",
              value: "gd",
            },
          ],
          form: {},
          tableData: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
              city: "湖北",
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
              city: "湖南",
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              city: "广东",
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              city: "广西",
            },
          ],
        },
      });
    </script>
  </body>
</html>
